<template>
  <div>
    <hr />
    <div id="remarkItem">
      <div class="left">
        <div class="img">
          <img :src="CurrImg" alt />
        </div>
      </div>
      <div class="right">
        <div>
          <span>{{username}}</span>
          <span>{{time | format}}</span>
        <span @click="showRecomment">回复</span>
        </div>
        <p>{{content | formatContent}}</p>
        <recomment :commentId="id" ref="recomment"></recomment>
      </div>
    </div>
    <transition name="fadeIn">
      <tip v-if="delRemarkShow" :text="textTip" @config="configDel" @cancel="cancelDel"></tip>
    </transition>
  </div>
</template>

<script>
// import msg from "../../components/msg";
import tip from "../../components/tips";
import { formatTime } from "../../formatTime";
import recomment from "../recommend/recomment";
export default {
  props: ["username", "goodNum", "time", "content", "id" ,"CurrImg"],
  components: {
    tip,
    recomment,
    // msg,
  },
  data() {
    return {

      showMsg: false,
      delRemarkShow: false,
      textTip: "你确定要删除吗",
      isShowColor: false,
      text: "删除成功",
      msgWay: "success",
      remarkGoodNum:this.goodNum
    };
  },
  created() {},
  filters: {
    format(val) {
      return formatTime(val);
    },
    formatContent(val) {
      return val.replace(/&gt;/g, ">").replace(/&lt;/g, "<");
    },
  },
  methods: {
    //展示回复的输入框
    showRecomment(){
      this.$refs.recomment.showRecomment=!this.$refs.recomment.showRecomment
      this.$refs.recomment.recommentUser="@"+this.username
    },
    showColor() {
      this.isShowColor = true;
      this.$axios.post("/comment/update",{
        id:this.id,
        goodNum:this.goodNum+1
      }).then(res=>{
        this.remarkGoodNum=this.remarkGoodNum+1
        
      })
    },
    showDel() {
      this.delRemarkShow = true;
    },
    configDel() {
      this.delRemark();
      this.delRemarkShow = false;
    },
    cancelDel() {
      this.delRemarkShow = false;
    },
    delRemark() {
      console.log(this.id);

      this.$axios
        .post("/comment/del", {
          id: this.id,
          username: this.$store.getters.user.username,
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            this.$emit("delRemark", "success");
            
          } else {
            this.$emit("delRemark", "error");
          }
        });
    },
    // getAllRemark() {
    //   this.$axios
    //     .get("/comment/search", {
    //       params: {
    //         blogId: this.$route.params.id,
    //       },
    //     })
    //     .then((res) => {
    //       console.log(res);
    //       if (res.data.error === -1) {
    //         this.remarkContent = res.data.data;
    //         this.$emit("restartSearch", res.data.data);
    //       } else if (res.data.error === 0) {
    //         this.$emit("restartSearch", false);
    //       }
    //     });
    // },
  },
};
</script>

<style lang="less" scoped>
@import url("../../css/comment/animate.css");
@media screen and (max-width: 765px) {
  .right{
    div{
      span{
      margin: 0 5px;
    }
    }
  }
}
@media screen and (min-width: 765px){
   .right{
    div{
      span{
      margin: 0 15px;
    }
    }
  }
}
.showColor {
  color: #fb7299;
}
#remarkItem {
  padding: 15px;
  display: flex;
  // justify-content: space-between;
  .left {
    text-align: center;
    margin-right: 10px;
    .img {
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    p {
      margin-top: 10px;
      transition: all 0.5s;
      &:hover {
        color: #e5e5e5;
      }
    }
  }
  .right {
    width: 90%;
    div {
      span {
        // margin: 0 15px;
        transition: all 0.4s;
        color: rgba(0, 0, 0, 0.4);
        font-size: 12px;
       &:nth-child(1){
         font-size: 16px;
         color: #333;
       } 
       &:nth-child(3){
         &:hover{
           color: salmon;
         }
       }
      }
      
    }
    p {
      margin-top: 10px;
      margin-left: 15px;
      margin-bottom: 15px;
    }
  }
}
</style>